
<template>
    <button :class="btnClass">
      <i v-if="loading =='' || loading == true" class="iconfont icon-loading" ></i>

      <span><slot></slot></span>
    </button>
</template>

<script>
export default {
  props: [ 'type', 'size', 'disabled', 'shape', 'loading' ],
  data(){
    return { btnClass: '', }
  },
  created(){ 
    this.setStyle()
  },  
  methods: {
    setStyle(){
      this.btnClass = 'fan-button'
      if(this.type != 'undefined' && this.type != '' && this.type != 'default') this.btnClass += ' fan-button_' + this.type
      if(this.size != 'undefined' && this.size != '' && this.size != 'medium') this.btnClass += ' fan-button_' + this.size
      if(this.shape != 'undefined' && this.shape != '' && this.shape != 'default') this.btnClass += ' fan-button_' + this.shape
      if (this.disabled == '' || this.disabled == 'true') this.btnClass += ' disabled'
      if (this.loading == '' || this.loading == 'true') this.btnClass += ' loading'

      
    },
  },
}
</script>

<style>
button{
  border: none;
  color: rgba(0, 0, 0, 0);
  background: rgba(0, 0, 0, 0);
}

.fan-button{
  margin: 10px;
  padding: 10px 20px;
  
  font-size: 14px;
  line-height: 1;

  cursor: pointer;

  border-radius: 4px;
  border: 1px solid #dcdfe6;

  color: #666;
  background-color: #fff;
}
.fan-button:hover{
  color: #4ea9d7;
  border: 1px solid #4ea9d7;
}
.fan-button:active{
  color: #2f96ca;
  border: 1px solid #2f96ca;
}

.fan-button_primary{
  color: #fff;
  border: 1px solid #33a3dc;
  background-color: #33a3dc;
}
.fan-button_primary:hover{
  color: #fff;
  border: 1px solid #4ea9d7;
  background-color: #4ea9d7;
}
.fan-button_primary:active{
  color: #fff;
  border: 1px solid #2f96ca;
  background-color: #2f96ca;
}

.fan-button_danger{
  color: #fff;
  border: 1px solid #f15b6c;
  background-color: #f15b6c;
}
.fan-button_danger:hover{
  color: #fff;
  border: 1px solid #ef6878;
  background-color: #ef6878;
}
.fan-button_danger:active{
  color: #fff;
  border: 1px solid #f04d60;
  background-color: #f04d60;
}

.fan-button_text{
  border: none;
}
.fan-button_text:hover{
  border: none;
  color: #4ea9d7;
}
.fan-button_text:active{
  border: none;
  color: #2f96ca;
}

.fan-button_large{
  font-size: 16px;
  padding: 12px 24px;
}
.fan-button_small{
  font-size: 12px;
  padding: 8px 16px;
}

.fan-button.disabled, 
.fan-button.disabled:hover, 
.fan-button.disabled:active {
  cursor: not-allowed;
  color: #c0c4cc;
  background-color: #fff;
  border-color: #ebeef5;
}
.fan-button_primary.disabled, 
.fan-button_primary.disabled:hover, 
.fan-button_primary.disabled:active {
  cursor: not-allowed;
  color: #fff;
  background-color: #4daad9;
  border-color: #4daad9;
}
.fan-button_danger.disabled, 
.fan-button_danger.disabled:hover, 
.fan-button_danger.disabled:active {
  cursor: not-allowed;
  color: #fff;
  background-color: #ec808d;
  border-color: #ec808d;
}
.fan-button_text.disabled, 
.fan-button_text.disabled:hover, 
.fan-button_text.disabled:active {
  color: #c0c4cc;
}

.fan-button_round{
  border-radius: 22px;
}
.fan-button_circle{
  border-radius: 50%;
  padding: 12px;
} 

.loading{
  pointer-events: none;
}
.icon-loading {
  display: inline-block;
  animation: rotating 2s linear infinite;
}
@keyframes rotating {
  from { transform: rotate(0) }
  to { transform: rotate(360deg) }
}
.fan-button [class*=iconfont] + span {
    margin-left: 5px;
}

</style>